<template>
	<div class="hello">
		<!--<van-nav-bar title="" left-text="" right-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />-->
		
	
		<h2 class="helloh2">{{$t("message.global.register")}}Clock</h2>
		<div class="wfont">	
			<!--<img src="../images/icon2@2x.png"/>-->
			<div class="registercenter">
				<img style="width: 6.25rem;
		height: 6.25rem;
		margin-top: -2.5625rem;
		display: inline-block;" src="../images/icon2@2x.png"/>
			</div>
			
			<div class="wcenter" style="padding-top: 1.0rem;display: flex;justify-content: space-around;">
				<div class="wtype wtypeleft">					
					<!--<router-link :to="/Mobilephone/list">-->
					<router-link :to="{path:'/Mobilephone/id='+listData+'/cn='+cn+''}">
						<span class="wname wnameimg">+{{this.$store.state.showFooter}} </span> <span class="wnam"></span>
					</router-link>
				</div>		
				
				<input type="text" v-model="phone_number" style="height: 1.8rem;font-size:15px;padding-left: 0.9375rem;" :placeholder="$t('message.global.PleaseNumber')" value="" />
			</div>
			<div class="wcenter boldimgs" style="line-height: 1.9rem;">
				<div class="wtype" style="width: 13rem;border: none;">
					<span class="wname wname2" style="width: 12rem;">

						<input type="text" v-model="verificationCode" style="height: 1.6rem;font-size:15px;width: 90%;" :placeholder="$t('message.global.Pleaseenter')"  value="" />
					</span> <span></span>
				</div>
				<div class="winput" @click="Pleaseenter()" style="font-size: 0.875rem;color: rgba(1, 205, 152, 1);padding-left: 0.7125rem;text-align: center;padding: 0rem 0.7125rem;">

					<img class="boldimg" :src="imgs" alt="">

				</div>
			</div>
			<div class="wcenter" style="display: flex;">
				<div class="wtype" style="width: 13rem;border: none;">
					<span class="wname wname2" style="width: 12rem;border-right:0.03125rem solid rgba(242, 241, 247, 1) ;">

						<input type="text" v-model="code" style="height: 1.6rem;font-size:15px;width: 90%;" :placeholder="$t('message.global.pleaseCode')"  value="" />
					</span> <span></span>
				</div>
				<div class="winput" @click="verification()" style="font-size: 0.875rem; color: rgba(1, 205, 152, 1);padding-left: 0.7125rem;text-align: center;padding: 0rem 0.7125rem;">

					{{auth_time}}

				</div>
			</div>
			<div class="wcenter">
				<!--<div class="wtype1">
					<span class="wname1"> </span>
				</div>-->
				<div class="winput">

					<input type="text" :disabled="isdisabled" v-model="Invitationcode"  :placeholder="$t('message.global.Pleaseenterthe')" style="height: 1.5rem;font-size:15px;padding-left: 0.3125rem;background: #fff;color: #777;"  value="" />
				</div>
			</div>
			
			<div style="width: 100%;text-align: center;margin-top: 30px;"  >
				
				<van-button @click='register()' style="border-radius:0.3125rem;  width: 18.59375rem;background: linear-gradient(to bottom, rgba(98, 209, 177, 1),  rgba(1, 205, 152, 1)); box-shadow: 0px 7px 12px -2px rgba(1, 205, 152, 0.3); border: none;color: #fff;text-align: center;font-size: 1rem;" type="default">
					<!-- 注册 -->
					{{$t('message.global.register')}}
				</van-button>
				
			</div>
			
			<p class="clickp">
				
				<img v-if="checked=='2'" @click="imgtable('1')" style="width: 1rem!important;
		height: 0.98rem!important;
		display: inline-block;
		float: left;
		margin-top: 0rem!important;
		margin-left: 1.2rem;
		margin-right: 0.625rem;" src="../images/table2@2x.png"/>
				<img v-if="checked=='1'"  @click="imgtable('2')" style="width: 1rem!important;
		height: 0.98rem!important;
		display: inline-block;
		float: left;
		margin-top: 0rem!important;
		margin-left: 1.2rem;
		margin-right: 0.625rem;" src="../images/circle@2x.png"/>
			<router-link tag='p' to='/'>{{$t('message.global.haveAgreed')}}<span>{{$t('message.global.userTerms')}}</span></router-link></p>
			<div class="bottomregin">
				
			</div>
		</div>

	</div>
</template>

<script>	
	import {
		AddressEdit,
		Button
	} from 'vant';
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		data() {
			return {
				value: '',
				code: '',
				password: '',
				phone_number: '',
				searchResult: [],
				verifi: '获取验证码',
				imgs:'',
				auth_time: '获取验证码', /*倒计时 计数器*/
				istrue:true,
				name:'',
				Invitationcode:'',
				isdisabled:'',
				checked:'1',
				imgs:'',
				verificationCode:'',
				uid:''
			}
		},
		computed: {
		    listData() {
		      return this.$store.state.showFooter;
		    },
		    cn() {
		      return this.$store.state.cn;
		    },
		    iphonnumber(){	    	
		    	return this.$store.state.iphonnumber;
		    }
		  },
		mounted(){
			this.verifi=this.$t('message.global.getCode')
			this.auth_time=this.$t('message.global.getCode')
			this.phone_number=this.$store.state.iphonnumber
			// 图形验证码接口
			this.Pleaseenter()
			/*判断url是否有邀请码*/
			if(this.$route.query.inviteCode=='' || this.$route.query.inviteCode==null || this.$route.query.inviteCode==undefined){
				this.isdisabled=false
			}else{
				this.isdisabled=true
				this.Invitationcode=this.$route.query.inviteCode
			}
			
		},
//		点击用户协议返回时手机号还在
		watch:{
			'phone_number'(a){					
				this.$store.dispatch('iphon',a)
			}
		},
		methods: {
			// 图形验证码
			Pleaseenter(){
					this.$gett(`pin_code/captcha?uuid=${this.generateUUID()}`)
					.then((res) => {
						var a = window.URL.createObjectURL(new Blob([res], {
							type: "image/jpeg"
						}));
						this.imgs = a
					}).catch((error)=>{	
														
					})
			},
			imgtable(a){			
				this.checked=a
			},
		      /*发送验证码*/
			verification() {
				
				if(!this.istrue) {
					
						this.$toast({
                      message: this.$t('message.global.verificationCode'),
                     duration: 800 
                  })
					return false;
				} else {
					if(this.phone_number == '' || this.phone_number === undefined) {
						
					this.$toast({
                      message: this.$t('message.global.phoneNumber'),
                     duration: 800 
                  })
					}else if(this.verificationCode == '' || this.phone_number == 'undefined'){
							this.$toast({
                      message: this.$t('message.global.incorrectformat'),
                     duration: 800 
                  })
					}else{
						var phone = this.phone_number
//					    if(!(/^1[3456789]\d{9}$/.test(phone))){ 					        
//					        this.$notify('手机号码有误，请重填');
//					        return false; 
//					    }else 
					    if(this.istrue){
					    	this.istrue=false
					    	var auth_time = 60;
				            var auth_timetimer =  setInterval(()=>{
				                auth_time--;
				                this.auth_time=auth_time	              
				                if(auth_time<=0){ 	
				                    this.auth_time=this.$t('message.global.getCode')
				                    this.istrue=true
				                    clearInterval(auth_timetimer);	                    
				                }
				            }, 1000);
							var json = {
								'mobile': this.phone_number,
								'country_code': this.$store.state.showFooter,
								"is_register": true,
								'captcha_pin_code':this.verificationCode,
								"uuid":this.uid
							}
							this.$post('pin_code/sms', json)
								.then((response) => {																
									
								})
								.catch((error)=>{
				                    this.istrue=true
									clearInterval(auth_timetimer);
									console.log(error.response)
										// this.$notify(this.$error[error.response.data.code])	
																
									})	
					   }											
					}
				}
			},
			getAuthCode () {        
				var auth_time = 60;
	            var auth_timetimer =  setInterval(()=>{
	                auth_time--;
	                this.auth_time=auth_time	              
	                if(auth_time<=0){ 	
	                    this.auth_time=this.$t('message.global.endVerification')
	                    this.istrue=true
	                    clearInterval(auth_timetimer);	                    
	                }
	            }, 1000);
	        },
			register() {
				var json = {
					  "country_code": this.$store.state.showFooter,
					  "mobile": this.phone_number,				 
					  "pin_code": this.code,					 
					  "check_exist": false					 
				}
				if(this.phone_number=='' || this.phone_number===null || this.phone_number===undefined){
					
					this.$toast({
                      message:this.$t('message.global.phoneNumber'),
                     duration: 800 
                  })
				}else if(this.code=='' || this.code===null || this.code===undefined){					
					this.$toast({
                      message: this.$t('message.global.verificationCannot'),
                     duration: 800 
                  })
				}else if(this.checked=='1'){
						
						this.$toast({
                      message: this.$t('message.global.checkAgreement'),
                     duration: 800 
                  })
				}else{				
				this.$post('pin_code/check_sms', json)
					.then((response) => {	
						if(response.pin_code!=''){
							this.$router.push({
								path: '/resetpasswords/',
								query: {
									'referrer_uid': this.Invitationcode,
									'pin_code': response.data.pin_code,
									"mobile": this.phone_number,
								}
							})
						}
						
					}).catch((error)=>{	
						console.log(error.response.data.code)
						// this.$toast(this.$error[error.response.data.code])	
						      
						
					})
						
				}
			},
			generateUUID() {
				var s = [];
				var hexDigits = "0123456789abcdef";
				for(var i = 0; i < 36; i++) {
					s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
				}
				s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
				s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
				s[8] = s[13] = s[18] = s[23] = "-";

				var uuid = s.join("");
				this.uid = uuid
				return uuid;
			},
			onClickLeft() {
				this.$router.go(-1)
			},
			onClickRight() {
				console.log('按钮');
			},
			
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
	
	  input::-webkit-input-placeholder {
			color: rgba(166, 166, 166, 1)
		}
	.boldimg{
		width: 5rem;
		height: 1.875rem;
	}
	.boldimgs{
		display: flex;
		justify-content: space-between
	}
	.winput {
		float: left;
	}
	
	.van-cell {
		padding: 0px 16px;
	}
	
	.van-field__control {
		display: inline-block!important;
		height: 2.5rem!important;
	}
	
	.wcenter {
		width: 18.875rem;
		border-bottom: 1px solid rgba(242, 241, 247, 1);
		height: 2.5rem;
		margin: 1.3125rem auto 0rem auto;
		/* padding-top: 1.3125rem; */
	}
	
	.wtype {
		width: 5rem;
		display: inline-block;
		height: 1.5rem;
		line-height: 1.6rem;
		border-right: 1px solid rgba(242, 241, 247, 1);
		float: left;
		
	}
	.wtypeleft{
		width: 6rem;
		display: inline-block;
		height: 1.5rem;
		line-height: 1.6rem;
		border-right: 1px solid rgba(242, 241, 247, 1);
		float: left;
		padding-left: 0.625rem;
	
	}
	.wtype1 {
		display: inline-block;
		height: 1.8rem;
		line-height: 1.9rem;
		float: left;
	}
	
	.wname {
		width: 3.83125rem;
		display: inline-block;
		text-align: left;
		color: rgba(88, 88, 103, 1);
		/*background: url(../../img/images/lo_07.png) no-repeat left center;*/
		/*background-size: 0.8125rem 1.1875rem;*/
		/*padding-left: 0.3125rem;*/
		font-size: 0.875rem;
	}
	
	.wname1 {
		width: 0.8125rem;
		height: 1.1875rem;
		display: inline-block;
		text-align: center;
		color: rgba(1, 205, 152, 1);
		/*background: url(../../img/images/logo_07.png) no-repeat left center;*/
		/*background-size: 0.8125rem 1.1875rem;*/
		/*padding-left: 0.3125rem;*/
	}
	
	.wname2 {
		width: 3.83125rem;
		display: inline-block;
		text-align: center;
		color: #01cd98;
		/*background: url(../../img/images/koul_11.png) no-repeat left center;
		background-size: 0.8125rem 1.0875rem;*/
		/*padding-left: 0.3125rem;*/
	}
	
	.van-icon,
	.van-icon::before {
		color: #acacac;
	}
	
	.van-nav-bar {
		background: #161514!important;
		
	}
	
	[class*=van-hairline]::after {
		border: none!important;
	}
	
	.van-icon-arrow-left:before {
		color: #fff!important;
		font-size: 1.2rem!important;
	}
	
	.wfont {
		width: 21.4375rem;
		height: 28.9375rem;
		background: #fff;
		margin: 0 auto;
		border-radius: 20px;
		position: relative;
			box-shadow: 0px 7px 12px -7px rgba(0, 0, 0, 0.19);
	}
	
	.logo {
		width: 7.0625rem;
		height: 2.625rem;
		margin: 3.28125rem auto 0px auto;
	}
	
	.helloh2 {
		font-size: 1.875rem;
		text-align: left;
		color: #fff;
		padding-left: 1.25rem;
		margin-top: 2.84375rem;
		margin-bottom: 3.6875rem;
		
	}
	
	.hello {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		/* background-color: rgba(1, 205, 152, 1); */
		background: linear-gradient(to bottom, rgba(98, 209, 177, 1),  rgba(1, 205, 152, 1))
	}
	.clickp img{
		
	}
	.registercenter{
		width: 100%;
		text-align: center;
	
	}
	.router-link-active{
		display: inline-block;
		float: left;
		width: 80%;
		text-align: left;
	}
	.registercenter img{
		
		
		
		
	}
	.wnameimg{
		margin-right: 0.925rem;
		/* padding-left: 0.9125rem; */
		background: url(../images/fenzu@2x.png) no-repeat right center;
		background-size:0.8125rem 0.46875rem ;
	}
	.van-field__control{
		font-size: 15px;
		color: #666;
	}
	.bottomregin{
		position: absolute;
		width: 20.625rem;
		height: 1rem;
		background: #fff;
		opacity: .6;
	
		border-radius:0rem 0rem 0.625rem 0.625rem;
		left: 50%;
		margin-left: -10.312rem;
		bottom: -.5625rem
		
	}
	.clickp {
		text-align: center;
		color: #fff;
		font-size: 0.78125rem;
		margin-top: 1.2625rem;
		color: #666;
		margin-bottom: 0.625rem;
		height: 1.25rem;
		line-height: 1.25rem;
	}
	
	.clickp span {
		color: rgba(1, 205, 152, 1);
	}
	h3 {
		margin: 40px 0 0;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
</style>